<template>
	<view class="timeline-item-container">
		<view class="left">
			<view class="day">{{record.month}}月</view>
			<view class="month">{{record.day}}</view>
		</view>
		<view class="right">
			<view class="divider">
				<view class="dot"></view>
				<view class="after"></view>
			</view>
			<view class="content">
				<u--text class="text" :text="record.text" size="28" color="#555"></u--text>
				<u-album :urls="record.images" multipleSize="188" singleSize="574"></u-album>
			</view>
			<view class="bottom">
				<view class="location">
					<image class="icon" mode="widthFix" src="/static/time_machine/location.png"></image>
					{{record.location||'未知'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TimelineItem",
		props: {
			record: Object
		},
		setup(props) {
			return {
			}
		}
	}
</script>

<style lang="scss" scoped>
	.timeline-item-container {
		align-items: flex-start;
		padding: 0 40rpx 0 40rpx;
		display: flex;
	}

	.timeline-item-container>.left {
		text-align: center;
	}

	.timeline-item-container>.left>.day {
		color: #222;
		font-size: 30rpx;
		font-weight: 700;
		margin: 0 0 16rpx;
		width: 50rpx;
	}

	.timeline-item-container>.left>.month {
		color: #999;
		font-size: 24rpx;
	}

	.timeline-item-container>.right {
		flex: 1;
		position: relative;
	}

	.timeline-item-container>.right>.divider {
		bottom: 0;
		left: 20rpx;
		position: absolute;
		top: 0;
	}

	.timeline-item-container>.right>.divider>.dot {
		border: 4rpx solid #0091FF;
		border-radius: 50%;
		box-sizing: border-box;
		height: 24rpx;
		margin: 30rpx 0 32rpx;
		width: 24rpx;
	}

	.timeline-item-container>.right>.divider>.after {
		background-color: #eee;
		height: calc(100% - 86rpx);
		margin: 0 auto;
		width: 4rpx;
	}

	.timeline-item-container>.right>.content {
		box-sizing: border-box;
		margin: 0 0 0 70rpx;
		width: 95%;
	}
	
	.timeline-item-container>.right>.content .text {
		display: block;
		margin-bottom: 20rpx;
		flex: 1;
		width: calc(100% - 48rpx);
	}
	
	.timeline-item-container>.right>.content :deep(image) {
		border-radius: 15rpx;
	}

	.timeline-item-container>.right>.bottom {
		color: #999;
		font-size: 24rpx;
		margin: 30rpx 0 20rpx 60rpx;
	}

	.timeline-item-container>.right>.bottom>.location>.icon {
		height: 30rpx;
		width: 30rpx;
	}
</style>
